<template>
	<div>
		<!-- 导航区域 -->
		<el-breadcrumb separator="/">
			<el-breadcrumb-item :to="{ path: '/admin/welcome' }">首页</el-breadcrumb-item>
			<el-breadcrumb-item>商品管理</el-breadcrumb-item>
			<el-breadcrumb-item>商品列表</el-breadcrumb-item>
		</el-breadcrumb>
		<!-- 卡片区域 -->
		<el-card class="box-card">
			<!-- 搜索框 -->
			<el-row :gutter="40">
				<el-col :span="7">
					<el-input type="text" placeholder="请搜索姓名" v-model="query_info.query" clearable @clear="getgoodlist()">
						<el-button slot="append" icon="el-icon-search" @click="getgoodlist()">搜索</el-button>
					</el-input>
				</el-col>
				<el-col :span="4">
					<el-button type="primary" @click="addDialogVisible = true">添加商品</el-button>
				</el-col>
			</el-row>
			<!-- 商品列表 -->
			<el-table :data="goodlist" border>
				<el-table-column type="index" label="#"></el-table-column>
				<el-table-column label="图片">
					<!-- 作用域插槽搞定img -->
					<template v-slot="scope">
						<el-image :src="baseUrl+scope.row.img"></el-image>
					</template>
				</el-table-column>
				<el-table-column label="商家" prop="user_name"></el-table-column>
				<el-table-column label="类别" prop="category_name"></el-table-column>
				<el-table-column label="名称" prop="name"></el-table-column>
				<el-table-column label="价格" prop="price"></el-table-column>
				<el-table-column label="数量" prop="num"></el-table-column>
				<el-table-column label="操作">
					<!-- 功能按钮 -->
					<template v-slot="scope">
						<el-button type="primary" icon="el-icon-edit" @click="showEditDialog(scope.row.id)"></el-button>
						<el-button type="danger" icon="el-icon-delete" @click="showDeleteDialog(scope.row.id)"></el-button>
						<!-- <el-button type="success" icon="el-icon-plus" @click="showAddDialog(scope.row.id)"></el-button> -->
					</template>
				</el-table-column>
			</el-table>
			<!-- 分页 -->
			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="query_info.page"
			 :page-sizes="[1, 2, 5, 10]" :page-size="query_info.page_size" layout="total, sizes, prev, pager, next, jumper"
			 :total="list_count">
			</el-pagination>
			<!-- 添加商品对话框 -->
			<el-dialog title="添加商品" :visible.sync="addDialogVisible" width="30%">
				<!-- 添加表单区域 -->
				<span>
					<el-form label-width="65px" class="login_form" :model="addForm">
						<el-form-item label="商家" prop="name">
							<el-input placeholder="请输入用户名" v-model="addForm.user_name"></el-input>
						</el-form-item>

						<el-form-item label="商品">
							<el-input placeholder="请输入商品名" v-model="addForm.name"></el-input>
						</el-form-item>

						<el-form-item label="分类">
							<el-input placeholder="请输入分类名" v-model="addForm.category_name"></el-input>
						</el-form-item>

						<el-form-item label="价格">
							<el-input placeholder="请输入价格" v-model="addForm.price"></el-input>
						</el-form-item>

						<el-form-item label="数量">
							<el-input placeholder="请输入商品数量" v-model="addForm.num"></el-input>
						</el-form-item>

						<el-form-item label="图片">
							<input @change="getAddFile" type="file" />
						</el-form-item>

					</el-form>
				</span>

				<span slot="footer" class="dialog-footer">
					<el-button @click="addDialogVisible = false">取 消</el-button>
					<el-button type="primary" @click="addDialogVisible = false;addgood()">确 定</el-button>
				</span>
			</el-dialog>

			<!-- 修改商品对话框 -->
			<el-dialog title="修改商品" :visible.sync="editDialogVisible" width="30%">
				<!-- 修改表单区域 -->
				<span>
					<el-form label-width="65px" class="login_form" :model="editForm">
						<el-form-item label="商家" prop="name">
							<el-input placeholder="请输入用户名" v-model="editForm.user_name"></el-input>
						</el-form-item>
					
						<el-form-item label="商品">
							<el-input placeholder="请输入商品名" v-model="editForm.name"></el-input>
						</el-form-item>
					
						<el-form-item label="分类">
							<el-input placeholder="请输入分类名" v-model="addForm.category_name"></el-input>
						</el-form-item>
					
						<el-form-item label="价格">
							<el-input placeholder="请输入价格" v-model="editForm.price"></el-input>
						</el-form-item>
					
						<el-form-item label="数量">
							<el-input placeholder="请输入商品数量" v-model="editForm.num"></el-input>
						</el-form-item>
					
						<el-form-item label="图片">
							<input @change="getEditFile" type="file" />
							<!-- <input /> -->
						</el-form-item>
					
					</el-form>
				</span>

				<span slot="footer" class="dialog-footer">
					<el-button @click="editDialogVisible = false">取 消</el-button>
					<el-button type="primary" @click="editDialogVisible = false;editgood()">确 定</el-button>
				</span>
			</el-dialog>

			<!-- 删除商品对话框 -->
			<el-dialog title="删除商品" :visible.sync="deleteDialogVisible" width="30%">
				<span>确定删除商品吗？</span>
				<span slot="footer" class="dialog-footer">
					<el-button @click="deleteDialogVisible = false">取 消</el-button>
					<el-button type="primary" @click="deleteDialogVisible = false;deletegood()">确 定</el-button>
				</span>
			</el-dialog>
		</el-card>
	</div>

</template>

<script>
	// import $ from 'jquery'
	export default {
		data() {
			return {
				baseUrl: "http://127.0.0.1:8000/",
				deleteDialogVisible: false,
				goodId: -1,
				editDialogVisible: false,
				addDialogVisible: false,
				query_info: {
					"token": window.sessionStorage.getItem("token"),
					"page": 1,
					"page_size": 5,
					"query": ""
				},
				goodlist: [],
				list_count: 0,
				addForm: {
					"name": "苹果",
					"num": "100",
					"price": 0,
					"img": "",
					"user_name": "rock",
					"category_name": "餐饮娱乐"
				},
				editForm: {
					"name": "",
					"num": 0,
					"price": 0,
					"img": "",
					"user_name": "",
					"category_name": ""
				}
			}
		},
		created() {
			this.getgoodlist();
		},
		methods: {
			async getgoodlist() {
				const {
					data: res
				} = await this.$http.get('goodapi/operation/list/', {
					params: this.query_info
				});
				// console.log(res);
				this.goodlist = res.results;
				this.list_count = res.count;
			},
			handleSizeChange(newPageSize) {
				this.query_info.page_size = newPageSize;
				this.getgoodlist();
			},
			handleCurrentChange(current_page) {
				this.query_info.page = current_page;
				// console.log(current_page);
				this.getgoodlist();
			},
			// 获取上传图片
			getAddFile(e) {
				let file = e.target.files[0];
				this.addForm.img = file;
				// console.log(this.addForm.img);
			},
			getEditFile(e) {
				let file = e.target.files[0];
				this.editForm.img = file;
			},
			addgood() {
				// FormData针对于文件传输
				let data = new FormData();
				data.append('user_name', this.addForm.user_name);
				data.append('name', this.addForm.name);
				data.append('price', this.addForm.price);
				data.append('num', this.addForm.num);
				data.append('category_name', this.addForm.category_name);
				data.append('img', this.addForm.img);
				// console.log(this.addForm.img);
				this.$http.post("goodapi/operation/?token=" + window.sessionStorage.getItem("token"), data)
					.then(res => {
						// console.log(res);
						this.$message.success("添加商品成功");
						this.getgoodlist();
					})
					.catch(res => {
						// console.log(res);
						this.$message.error("添加商品失败");
					});

			},

			async showEditDialog(id) {
				this.editDialogVisible = true;
				this.goodId = id;
				// console.log(this.goodId);
				let data = {
					"token": window.sessionStorage.getItem("token")
				}
				const {
					data: res
				} = await this.$http.get("goodapi/operation/" + id + "/", {
					params: data
				});
				// console.log(res);
				this.editForm.name = res.name;
				this.editForm.price = res.price;
				this.editForm.num = res.num;
				this.editForm.user_name = res.user_name;
				this.editForm.category_name = res.category_name;
				// this.editForm.img = res.img
				// console.log(editForm);
			},
			async editgood() {
				// let url = "goodapi/operation/update/" + "?token=" + window.sessionStorage.getItem("token");
				let url = "goodapi/operation/" + this.goodId + "/?token=" + window.sessionStorage.getItem("token");
				let data = new FormData();
				data.append('user_name', this.editForm.user_name);
				data.append('name', this.editForm.name);
				data.append('price', this.editForm.price);
				data.append('num', this.editForm.num);
				data.append('category_name', this.editForm.category_name);

				if(this.editForm.img){
					data.append('img', this.editForm.img);
				}
				// console.log(data.get("img"));
				const {
					data: res
				} = await this.$http.patch(url, data);
				// console.log(res);
				if (res.id) {
					this.$message.success("修改商品成功");
					this.getgoodlist();
				} else {
					this.$message.error("修改商品失败");
				}
			},
			showDeleteDialog(id) {
				this.deleteDialogVisible = true;
				this.goodId = id;
			},
			async deletegood() {
				let url = "goodapi/operation/" + this.goodId + "/?token=" + window.sessionStorage.getItem("token");
				const {
					data: res
				} = await this.$http.delete(url);
				if (!res) {
					this.$message.success("删除商品成功");
					this.query_info.page = 1;
					this.getgoodlist();
				} else {
					this.$message.error("删除商品失败");
				}
			},
		}
	}
</script>

<style lang="less" scoped="scoped">
	.el-breadcrumb {
		font-size: 0.75rem;
		margin-bottom: 0.9375rem;
	}
	.el-image {
		width: 6.25rem;
		height: 6.25remrem;
	}
</style>
